<template>
  <div class="admins-add" v-loading="loading">
    <el-card class="custum-card">
      <div class="header">
        <el-page-header @back="$router.go(-1)">
        </el-page-header>
      </div>
      <div class="form-database-form">
        <el-form :model="form" ref="formModel" label-width="130px" status-icon validate-on-rule-change
          class="custom-form">
          <el-form-item label="帐号" prop="username" required
            :rules="[{ required: true, message: '请填写帐号' }, { validator: rule.checkRemote, message: '已存在', checktype: 'update', module: 'admins', col: 'username', id: '{{   form.id   }}', trigger: 'blur' }]">
            <el-input placeholder="输入帐号" class="custom-input" style="width:250px;" v-model="form.username" />
          </el-form-item>
          <el-form-item v-if="btnText" class="button-item">
            <el-button type="primary" class="custom-button" @click="submit">{{ btnText }}</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>
<style scoped>
.header {
  background: #7fabbe;
  margin: 15px;
  color: #fdfcfc;
  padding: 15px 20px;
  font-weight: bold;
  letter-spacing: 9px;
  border-radius: 8px;
}

.el-page-header::v-deep .el-page-header__title {
  color: #ffffff;
}


.admins-add .custom-card .el-card__body {
  padding: 10px !important;
}

.admins-add {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0f2f5;
}

.custum-card {
  width: 100%;
  /* 修改这里的宽度 */
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

}

.custom-form {
  display: flex;
  flex-direction: column;
}

.custom-input {
  width: 100% !important;
  /* 宽度铺满 */
  border-radius: 4px;
  font-size: 14px;
  margin-bottom: 20px;
  /* 增加下边距 */
}

.custom-input::placeholder {
  color: #bfbfbf;
}

.button-item {
  display: flex;
  justify-content: center;
}

.custom-button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  background-color: #659ab1;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}

.custom-button:hover {
  background-color: #b3cdd8;
  border: #b3cdd8;
}

.form-database-form {
  padding-top: 30px;
  padding-left: 185px;
  padding-right: 280px;
  padding-bottom: 20px;
}
</style>
<script>
import api from '@/api'
import rule from '@/utils/rule'
import { extend } from '@/utils/extend'


export default {
  name: 'admins-add',
  data() {
    return {
      rule,
      loading: false,
      form: {
        username: '',


      },


    }
  },
  watch: {
    id: {
      handler() {
        this.loadInfo();
      }
    }
  },
  props: {
    isRead: {
      type: Boolean,
      default: true
    },
    btnText: {
      type: String,
      default: '提交'
    },
    id: {
      type: [String, Number],
      required: true
    },
  },

  computed: {},
  methods: {
    submit() {
      this.$refs.formModel.validate().then(res => {
        if (this.loading) return;
        this.loading = true;
        var form = this.form;

        this.$post(api.admins.update, form).then(res => {
          this.loading = false;
          if (res.code == api.code.OK) {
            this.$message.success('修改成功');
            this.$emit('success', res.data);
            this.$refs.formModel.resetFields();
            this.loadInfo();
          } else {
            this.$message.error(res.msg);
          }
        }).catch(err => {
          this.loading = false;
          this.$message.error(err.message);
        })

      }).catch(err => {
        console.log(err.message);
      })

    },
    loadInfo() {
      // 更新数据,获取数据
      this.loading = true;
      var form = this.form;
      this.$post(api.admins.edit, {
        id: this.id
      }).then(res => {
        this.loading = false;
        if (res.code == api.code.OK) {
          extend(this, res.data);
          this.form = res.data.mmm;

        } else {
          this.$message.error(res.msg);
          this.$router.go(-1);
        }
      }).catch(err => {
        this.$message.error(err.message);
        this.$router.go(-1);
      });
    },
  },
  created() {
    this.loadInfo();
  },
  mounted() {
  },
  destroyed() {
  }
}
</script>
